<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>python资源分享中心</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    {% load static %}
    <link href="{% static "css/blog.css" %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}">
</head>

<body>

{#nav部分使用的组件#}
{% include "nav.html" %}
<div class="container">
    {#    中间的大标题#}
    <div class="blog-header">
        <h1 class="blog-title">欢迎来到Python资源分享中心</h1>
        <p class="lead blog-description">在这里你可以发布或观看所有你感兴趣的内容.</p>
    </div>
    <div class="row">
        {#文章的部分#}
        <div class="col-sm-8 blog-main">
            {% for article in all_article %}
                <div class="blog-post"><i class="fa fa-superpowers fa-spin"></i>
                    <h2 class="blog-post-title"><a href="{% url "article" article.pk %}">{{ article.title }}</a></h2>
                    <p class="blog-post-meta">发布时间:{{ article.create_time }} 作者: {{ article.author }}</p>
                    <p>{{ article.abstract }}</p>
                </div>
            {% endfor %}

            {{ page_html|safe }}

        </div><!-- /.blog-main -->
        {#        文章的右边部分#}
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
            <div class="sidebar-module sidebar-module-inset">
                <h4>About</h4>
                <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet
                    fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            </div>
            <div class="sidebar-module">
                <h4>Archives</h4>
                <ol class="list-unstyled">
                    <li><a href="http://www.baidu.com">March 2014</a></li>
                    <li><a href="http://www.baidu.com">February 2014</a></li>
                    <li><a href="http://www.baidu.com">January 2014</a></li>
                    <li><a href="http://www.baidu.com">December 2013</a></li>
                    <li><a href="http://www.baidu.com">November 2013</a></li>
                    <li><a href="http://www.baidu.com">October 2013</a></li>
                    <li><a href="http://www.baidu.com">September 2013</a></li>
                    <li><a href="http://www.baidu.com">August 2013</a></li>
                    <li><a href="http://www.baidu.com">July 2013</a></li>
                    <li><a href="http://www.baidu.com">June 2013</a></li>
                    <li><a href="http://www.baidu.com">May 2013</a></li>
                    <li><a href="http://www.baidu.com">April 2013</a></li>
                </ol>
            </div>
            <div class="sidebar-module">
                <h4>Elsewhere</h4>
                <ol class="list-unstyled">
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ol>
            </div>
        </div><!-- /.blog-sidebar -->

    </div><!-- /.row -->

</div><!-- /.container -->

{#最下面的部分#}
<footer class="blog-footer">
    <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a
            href="https://twitter.com/mdo">@mdo</a>.</p>
    <p>
        <a href="#">Back to top</a>
    </p>
</footer>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
